<template>
  <div class="flex-center">
    <div class="str">
      <el-input :rows="28" type="textarea" class="ipt" v-model="str"></el-input>
    </div>
    <el-button class="btn" @click="strToJSON">转JSON</el-button>
    <div class="json">{{json}}</div>
  </div>
</template>

<script>
  export default {
    name: "strToJSON",
    data() {
      return {
        str: '',
        json: {}
      }
    },
    methods: {
      strToJSON() {
        this.json = JSON.parse(this.str)
      }
    }
  }
</script>

<style scoped>
.btn{
  height: 40px;
}
.str .ipt, .json {
  width: 400px;
  height: 600px;
}
.json{
  flex: 1;
  border: 1px solid;
}
</style>
